import React from 'react';
import MainUI from '../../components/layout/MainUI';
import {connect} from 'dva';
import  moment from 'moment';
import {
  Breadcrumb,
  Button,
  Col,
  Form,
  Input,
  Row,
  Table,
  Icon,
  DatePicker,
} from 'antd';

const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {span: 8},
  wrapperCol: {span: 16},
};

class ServiceDayMoney extends React.Component {

  state = {
    columns: [
      {title: '服务员工', dataIndex: 'serviceName',},
      {title: '服务员工电话', dataIndex: 'serviceCellphone',},
      {
        title: '当日总金额(元)', dataIndex: 'money', render: (value) => {
        return <font size={3} color='green'>￥ {value}</font>;
      }
      },
      {title: '日期', dataIndex: 'day',render: (value) => {return moment(value).format("YYYY-MM-DD") }},

    ],
    date:moment(),
    dateString:undefined,
  };
  search = () => {
    this.props.form.validateFieldsAndScroll((errors, values) => {
      if (errors) {

      } else {
        this.props.dispatch({
          type: 'finance/e_getServiceDayMoneyReport',
          payload: {...values,day:this.state.dateString}
        });
      }
    });
  };


  render() {
    return (
      <MainUI>
        <Breadcrumb style={{margin: '12px 0'}}>
          <Breadcrumb.Item>功能管理</Breadcrumb.Item>
          <Breadcrumb.Item> 财务管理</Breadcrumb.Item>
          <Breadcrumb.Item> 员工日服务记录</Breadcrumb.Item>
        </Breadcrumb>
        <div style={{padding: 24, background: '#fff', minHeight: 360}}>
          <Form className="ant-advanced-search-form">
            <Row>
              <Col span={5}>
                <FormItem {...formItemLayout} label='日期'>
                  <DatePicker value={this.state.date} allowClear={false} style={{marginTop:4}} onChange={(date,dateString)=>{
                    const state=this.state;
                    state.date=date;
                    state.dateString=dateString;
                    this.setState(state);
                  }} />
                </FormItem>
              </Col>
              <Col span={5}>
                <FormItem {...formItemLayout} label='服务员工电话'>
                  {this.props.form.getFieldDecorator('cellphone', {
                    rules: [
                      {
                        message: "请输入手机号",
                        type: "string",
                        pattern: "^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\\d{8}$"
                      },
                    ],
                  })(
                    <Input placeholder="手机号" suffix={<Icon type='phone'/>}/>
                  )}
                </FormItem>
              </Col>
              <Col span={2}>
                <Button style={{marginLeft: 8, marginTop: '3px'}} onClick={()=>{ this.props.form.resetFields();
                  const state=this.state;
                  state.date=null;
                  state.dateString=undefined;
                  this.setState(state);
                }}>
                  清空
                </Button>
              </Col>
              <Col span={12} style={{textAlign: 'right',}}>
                <Button type="primary" icon="retweet" onClick={() => {
                  this.search();
                }}>刷新</Button>
              </Col>
            </Row>
          </Form>
          <Row>
            {<Table bordered={true} rowKey='serviceId' style={{marginTop: '10px'}}
                    columns={this.state.columns}
                    dataSource={this.props.serviceDayMoneys} pagination={false}/>
            }
          </Row>
        </div>
      </MainUI>
    )
  };
}

function mapStateToProps(state) {
  return {
    serviceDayMoneys: state.finance.serviceDayMoneys,
  }
}

export default connect(mapStateToProps)(Form.create()(ServiceDayMoney));
